<template>
  <!-- 车辆列表信息 -->
    <el-form label-width="120px" @submit.native.prevent="save">
  <el-tabs type="border-card" value="basic">
    <el-tab-pane label="基本信息" name="basic">
        <div style="margin-left:900px">店铺id</div>
      <div v-if="carDetails" class="car-content">
        <div class="car-left">
          <div class="car-icon">
            <img :src="carDetails.icon" style="height:320px;width:460px" />
          </div>
        </div>
        <div class="car-right">
          <div class="car-name">
            {{ carDetails.name }}
          </div>
          <div class="car-price">
            {{ carDetails.price }}
          </div>
          <div class="middle-content">
            <div class="car-milage">
              行驶里程：
              {{ carDetails.milage }}
            </div>
            <div class="car-age">
              车龄：
              {{ carDetails.age }}
            </div>
            <div class="car-age">
              燃油类型：
              {{ carDetails.TransmissionType }}
            </div>
          </div>
          <div
            style="margin-left: 100px;margin-top:30px"
            class="d-flex ai-center"
          >
            <div class="mr-5">
              <el-button type="success" round>预约看车</el-button>
            </div>
            <div @click="operationCarCollect">
              <el-button
                round
                v-if="collect_status"
                style="background-color:#ddd"
              >
                已收藏
                <i class="el-icon-check ml-1"></i
              ></el-button>
              <el-button round type="warning" v-else> 添加收藏</el-button>
            </div>
          </div>
        </div>
      </div>
    </el-tab-pane>
    <el-tab-pane label="详细图片" name="detailPics">
      <el-row type="flex" style="flex-wrap:wrap">
        <div v-for="(detailPicsItem, carIndex) in detailPics" :key="carIndex">
          <div label="名称" style="font-size:12px">
            {{ detailPicsItem.name }} : {{ detailPicsItem.description }}
          </div>
          <div class="car-icon">
            <img
              :src="detailPicsItem.icon"
              style="height:320px;width:460px;margin-right:30px"
            />
          </div>
        </div>
      </el-row>
    </el-tab-pane>
  </el-tabs>
    </el-form>
</template>

<script>
export default {
  props: {
    id: {},
  },

  data() {
    return {
      carDetails: {},
      detailPics: {},

      collect_status: false,
      collect_id: null,
    };
  },

  computed: {
    username() {
      return sessionStorage.username;
    },
    userid() {
      return sessionStorage.userid;
    },
  },

  methods: {
    // 获取车辆详情信息
    async fetchCars() {
      const res = await this.$http.get(`/getCarDetails/${this.id}`);
      this.carDetails = res;
      this.detailPics = res.detailPics;
      console.log(res);
      console.log(res.detailPics);
      console.log("车辆详细信息");
    },
    // 收藏车辆
    async operationCarCollect() {
      if (sessionStorage.userid) {
        if (this.collect_status) {
          // 已经收藏，取消收藏
          await this.$http.delete(`/user/collects/${this.collect_id}`);
          this.$message({ message: "取消收藏成功", type: "success" });
          this.collect_status = false;
        } else {
          // 未收藏，添加收藏
          const res = await this.$http.post("/collect", {
            userId: sessionStorage.userid,
            collectId: this.id,
            collectType: "车辆",
          });
          this.collect_id = res._id;
          this.$message({ message: "收藏成功", type: "success" , duration: 800,});
          this.collect_status = true;
        }
      } else {
        this.$confirm("你当前暂未登录，是否登录?", "提示", {
          confirmButtonText: "前往登录",
          cancelButtonText: "我再看看",
          type: "warning",
        })
          .then(() => {
            this.$router.push("/login");
          })
          .catch(() => {});
      }
    },

    async fetchCollectStatus() {
      const res = await this.$http.get(`/collect`, {
        params: {
          userId: sessionStorage.userid,
          collectId: this.id,
          collectType: "车辆",
        },
      });
      if (res.message == "success") {
        this.collect_id = res._id;
        this.collect_status = true;
      }
    },
  },

  created() {
    this.id && this.fetchCars();
    sessionStorage.userid && this.fetchCollectStatus();
  },
};
</script>

<style ang="scss" scoped>
.car-content {
  flex-wrap: wrap;
  display: flex;
  margin: 20 auto;
  width: 1080px;
  left: 10px;
}
.car-left {
  flex-wrap: wrap;
}
.car-right {
  display: block;
  flex-wrap: wrap;
  display: flex;
  flex-direction: column;
  margin-top: 25px;
}
.middle-content {
  background-color: fixed;
  -color: rgba(223, 107, 107, 0.671);
  display: block;
  margin-top: 20px;
  margin-left: 100px;
  flex-direction: column;
  font-size: 13px;
}
.car-age {
  margin-top: 15px;
}

.car-name {
  flex-wrap: wrap;
  display: flex;
  margin: 10px 0;
  margin-left: 100px;
  font-size: 16px;
}
.car-price {
  flex-wrap: wrap;
  display: block;
  font-size: 25px;
  color: red;
  margin-bottom: 15px;
  margin-left: 100px;
  margin-top: 20px;
}
.car-icon {
  margin: 10px 0;
  font-size: 6px;
}
</style>
